<template>
    <div>
        <h1>B组件,{{ num }}</h1>
        <n-button type="primary" size="medium" @click="count.plus()">通过action修改state</n-button>
        <div v-for="item in star.filterList">
            {{ item.name }} {{ item.age  }}
        </div>
        <div v-for="(item,index) in goods.filtersGoodsList" :key="index">
            商品名称：{{ item.name }} 商品价格：{{ item.price }}
        </div>
        <n-button type="primary" size="medium" @click="handelAdd">录入商品</n-button>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCount } from '../../store/count';
import { useStar } from '../../store/star';
import { useGoods } from '../../store/goods';
let count = useCount();
// let {num} =  count; // 对于状态机数据的解构会丢失响应性
let {num} = storeToRefs(count); // 解构之后会保持响应性
const star = useStar();
const goods = useGoods();
const handelAdd = () => {
    goods.goodsAdd({
        name:"新商品",
        price:Math.random()*100+50
    })

}
</script>

<style lang="scss" scoped>

</style>